<template>
    <div class="exam-container">
        <el-skeleton :loading="data.isFirst" :rows="15" animated>
        <el-descriptions title="行为日志·详情" direction="vertical" :column="2" border>
        <el-descriptions-item label="类型" :span="1" width="50%">
          <el-tag>{{data.data.group}}</el-tag> 
        </el-descriptions-item>
        <el-descriptions-item label="行为" width="50%" :span="1">
            <el-tag>{{data.data.action}}</el-tag> 
        </el-descriptions-item>

        <el-descriptions-item label="用户" :span="1">
          <el-tag>{{data.data.author}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="IP" :span="1">
            <el-tag>{{data.data.ip}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="结果" :span="1" >
            <el-tag type="success" v-if="data.data.result==0">成功</el-tag>
            <el-tag type="danger" v-else>失败</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="消息" :span="1">
            <el-tag>{{data.data.resultMessage}}</el-tag>
        </el-descriptions-item>


        <el-descriptions-item label="参数" :span="1">
            <el-alert :title="data.data.paras" type="info" :closable="false"/>
      
        </el-descriptions-item>

        </el-descriptions>
    </el-skeleton>
    </div>
</template>



<script setup lang="ts">
import { onMounted, ref,reactive } from "vue";
import { useRoute } from "vue-router";
import {getSingleActionLog} from '../../api/logs';
const routes=useRoute();

let data=reactive({
data:{
    paras:'',
    resultMessage:'',
    result:0,
    ip:'',
    author:'',
    action:'',
    group:''
},
//参数id
 id:"",
 isFirst:true
})

//获取详情数据
const getLogsActionDetail=()=>{
    console.log(435453534);
    
    getSingleActionLog({id:data.id}).then((res:any)=>{
       data.data=res.data;
       data.isFirst=false;
       
    })
}
  onMounted(()=>{
   data.id=routes.params.id.toString();
   getLogsActionDetail();
  })
</script>

<style scoped>

</style>



